<template>
	<view class="content">
		<view class="mainpadding">
			<view class="flexbetween">
				<view style="width: 20%;"></view>
				<view class="flexleft flexcenter">
					<view class="all" :class="type==1?'gongying':'xuqui'" @click="changetype(1)">实物商品</view>
					<view class="alls" :class="type==2?'gongying':'xuqui'" @click="changetype(2)">服务商品</view>
				</view>
				<view class="word_rl black flexright " style="width: 20%;" v-show="guanliflag && gouwcnr.length"
					@click="guanliflag=!guanliflag">取消管理</view>
				<view class="word_rl black flexright " style="width: 20%;" v-show="!guanliflag && gouwcnr.length"
					@click="guanliflag=!guanliflag">管理</view>
				<view style="width: 20%;" v-if="gouwcnr.length==0"></view>
			</view>
			<view class="neirong">
				<view class="ffffff radius mainpadding_top" v-for="item in gouwcnr" :key="item.shop_id">
					<view class="flexleft" @click="jumpdetail('/pages_shouye/mendianxq?id=',item.shop_id)">
						<view class="margin_right" style="width: 8%;" @click.stop="checkitemAll(item)">
							<!-- 已勾选 -->
							<view class="checkaudio margin_right" v-if="item.isall">
							</view>
							<view class="nocheckaudio margin_right2" v-if="!item.isall"></view>
						</view>
						<image src="@/static/images/tabbar/dianpus.png" class="margin_right1 dpimg" mode=""></image>
						<view class="titletext hei_text bold">{{item.shop_name}}</view>
						<u-icon name="arrow-right" color="#999" size="14"></u-icon>
					</view>
					<view class="flexbetween margin_top"  v-for="ite in item.goodslist" :key="ite.sku.goods_id">
						<view style="width: 8%;" @click="cleckite(ite)">
							<!-- 已勾选 -->
							<view class="checkaudio margin_right" v-if="ite.ischeck"></view>
							<view class="nocheckaudio margin_right2" v-if="!ite.ischeck"></view>
						</view>
						<view class="flexleft" style="width: 91%;">
							<view class="shilitu  margin_right" @click="tzspxq(ite.goods_id,1)">
								<image :src="ite.image" mode=""></image>
							</view>
							<view class="flexcolumn1" style="width: 63%;">
								<view class="text_e color_san yhxiank"  @click="tzspxq(ite.goods_id,1)">{{ite.title}}</view>
								<view class="huieshs "  @click="tzspxq(ite.goods_id,1)">{{ite.sku.difference.join()}}</view>
								<view class="flexbetween " style="width: 100%;">
									<view class="qianshu money_qian"  @click="tzspxq(ite.goods_id,1)">¥{{ite.sku.price}}</view>
									<u-number-box button-size="36" @change="changenum($event,ite)" :asyncChange="true"
										color="#000000" bgColor="#F7F7F7" iconStyle="color: #fff"
										v-model="ite.number"></u-number-box>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 固定底部 -->
			<view class="gudingdibu1 ffffff mainpadding" v-if="gouwcnr.length">
				<view class="flexbetween">
					<view class="flexleft" @click="checkAll">
						<view class="checkaudio margin_right3" v-if="ischeckAll"></view>
						<view class="nocheckaudio margin_right3" v-if="!ischeckAll"></view>
						<view class="titletext">全选</view>
					</view>
					<view class="btn line_orange" @click="buy" v-show="!guanliflag">
						<view>立即支付</view>
					</view>
					<view class="btn line_orange" @click="deletcar" v-show="guanliflag">
						<view>移出购物车</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				type: 1, //1实物，2虚拟
				goodsList: [],
				ischeckAll:false,
				gouwcnr: [], //购物车列表内容
				allprice: 0,
				guanliflag: false,
				is_login: false,
			}
		},
		onLoad() {
			this.Colortype = this.$store.state.type
		},
		onShareAppMessage: function(options) {
			return {
				title: '喜嘟来商业联盟',
				imageUrl: '',
				path: '/pages/index/index?invite_code=' + uni.getStorageSync("invite_code")
			}
		},
		onShareTimeline: function() {
			return {
				title: '喜嘟来商业联盟',
				imageUrl: '',
				path: '/pages/index/index?invite_code=' + uni.getStorageSync("invite_code")
			}
		},
		onShow() {
			this.is_login = httpRequest.checkIsLogin();
			if (this.is_login) {
				this.gwclb()
			}
		},
		watch: {
			gouwcnr:{
				handler(newval){
					let arr = 0
					let price = 0
					newval.forEach(item=>{
						let arr1 = 0
						item.goodslist.forEach(ite=>{
							if(ite.ischeck){
								arr1 = arr1 + 1
								price = Number(price) + Number(ite.sku.price) * Number(ite.number)
							}
						})
						if(arr1==item.goodslist.length){
							item.isall = true
						}else{
							item.isall = false
						}
						if(item.isall){
							arr = arr + 1
						}
					})
					if(arr==newval.length){
						this.ischeckAll = true
					}else{
						this.ischeckAll = false
					}
					this.price = price
				},
				deep:true
			}
		},
		methods: {
			buy() {
				let data = {
					buy_type:this.type,
					type: "cart", //detail=商品详情,cart=购物车
					ly: 1, //1=普通,2=拼团,3=秒杀
					wanlshop_group_id: "", //参团id
					lists: []
				}
				this.gouwcnr.forEach(item => {
					let obj = {
							shop_id:item.shop_id,
							coupon_id: "",
							products: []
						}
					item.goodslist.forEach(ite => {
						if (ite.ischeck) {
							obj.products.push({
								goods_id: ite.sku.goods_id,
								sku_id: ite.sku.id,
								number:ite.number
							})
						}
					})
					if(obj.products.length){
						data.lists.push(obj)
					}
				})
				if(data.lists.length==0){
					httpRequest.toast("请选择商品再进行操作")
					return
				}
				uni.navigateTo({
					url: '/pages_shouye/querenddsw?msg=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			jumpdetail(url, id) {
				uni.navigateTo({
					url: url + id
				})
			},
			tzspxq(id,attr) {
				uni.navigateTo({
					url: '/pages_lianmengsc/shangpxq?id='+id+"&attr="+attr
				})
			},
			// 删除购物车
			deletcar() {
				let data = []
				this.gouwcnr.forEach(item => {
					item.goodslist.forEach(ite => {
						if (ite.ischeck) {
							data.push({
								goods_id: ite.sku.goods_id,
								sku_id: ite.sku.id
							})
						}
					})
				})
				if (data.length == 0) {
					httpRequest.toast("请选择商品再进行操作")
					return
				}
				httpRequest.modal('提示', '确定删除当前选中数据吗？', true, (res) => {
					if (res) {
						httpRequest.request('/api/cart/delCart', 'POST', {
							data: data,
						}).then(res => {
							httpRequest.toast(res.msg)
							this.gwclb()
						})
					}
				})
			},
			// 购物车列表接口
			gwclb() {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/wxlogin"
					})
					return false
				}
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				httpRequest.request('/api/cart/cartList', 'POST', {
					// 传参
					type:this.type
				}, false, false, true).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						res.data.forEach(item => {
							this.$set(item, "isall", false)
							item.goodslist.forEach(ite => {
								this.$set(ite, "ischeck", false)
							})
						})
						this.gouwcnr = res.data
					}
				})
			},
			changenum(e, item) {
				item.number = e.value
				httpRequest.request('/api/cart/clCart', 'POST', {
					goods_id: item.goods_id,
					number: e.value,
					sku_id: item.sku_id,
				}, false, false, true).then(res => {
					// httpRequest.toast(res.msg)
				})
			},
			// 立即购买
			atonceBuy() {
				let data = {
					msg: [],
					type: "cart" //car购物车，detail详情
				}
				this.gouwcnr.forEach(item => {
					if (item.is_checked) {
						data.msg.push({
							goodsId: item.id,
							specType: 0,
							num: item.number
						})
					}
				})
				if (data.msg.length == 0) {
					return
				}
				uni.navigateTo({
					url: '/pages/gouwuche/querendd?msg=' + encodeURIComponent(JSON.stringify(data))
				})

			},
			checkAll(){
				if(this.ischeckAll){
					this.ischeckAll = false
					this.gouwcnr.forEach(item=>{
						item.isall = false
						item.goodslist.forEach(ite=>{
							ite.ischeck = false
						})
					})
				}else{
					this.ischeckAll = true
					this.gouwcnr.forEach(item=>{
						item.isall = true
						item.goodslist.forEach(ite=>{
							ite.ischeck = true
						})
					})
				}
			},
			cleckite(ite){
				ite.ischeck = !ite.ischeck
			},
			checkitemAll(item) {
				if (item.isall) {
					item.isall = false
					item.goodslist.forEach(ite => {
						ite.ischeck = false
					})
				} else {
					item.isall = true
					item.goodslist.forEach(ite => {
						ite.ischeck = true
					})
				}
			},
			changetype(val) {
				if (this.type == val) {
					return false
				}
				this.type = val
				this.gwclb()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.xuqui {
		background: #fff;
		color: #ff9341;
		border: 2rpx solid #ff9341;
	}

	.gongying {
		background: #ff9341;
		color: #ffff;
		border: 2rpx solid #ff9341;
	}

	.all {
		border-radius: 11rpx 0rpx 0rpx 11rpx;
		font-size: 31rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		padding: 11rpx 38rpx;
		border: 2rpx solid #ff9341;
	}

	.alls {
		border-radius: 0rpx 11rpx 11rpx 0rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		padding: 11rpx 38rpx;
		border: 2rpx solid #ff9341;
	}

	.dpimg {
		width: 40rpx;
		height: 40rpx;
		min-width: 40rpx;
	}

	.btn {
		padding: 20rpx 50rpx;
		border-radius: 120rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.line_orange {
		background-color: #fa9342;
	}

	.neirong {
		padding-bottom: 244rpx;
	}

	.huieshs {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.gudingdibu1 {

		bottom: 0;
		// #ifdef H5
		bottom: 150rpx;
		// #endif
		position: fixed;
		left: 0;
		width: 100%;
		box-sizing: border-box;
	}

	.jiahao {
		background-size: 100% 100%;
		width: 21rpx;
		height: 19rpx;
		position: absolute;
		top: 14rpx;
		right: 12rpx;

	}

	.jianhao {
		width: 22rpx;
		position: absolute;
		left: 13rpx;
		// height: 3.5rpx;
		top: 20rpx;
		height: 20rpx;

		.line {
			height: 3.5rpx;
			width: 22rpx;
			background-color: #999999;
		}
	}

	.xhtext {
		width: 80rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: RGBA(255, 117, 16, 1);
	}

	// .jiajian {
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	width: 164rpx;
	// 	height: 46rpx;
	// 	position: relative;
	// 	border-radius: 20rpx;
	// 	background-size: 100% 100%;
	// 	background-image: url('/static/image/home/bujinqi.png');
	// }

	.qianshu {
		color: #D48B39;
	}

	.money_qian {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
	}

	.shilitu {
		width: 196rpx;
		height: 188rpx;
		border-radius: 14rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 14rpx;
		}
	}

	.ershib {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.yhxiank {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden; //溢出内容隐藏
		text-overflow: ellipsis; //文本溢出部分用省略号表示
		display: -webkit-box; //特别显示模式
		-webkit-line-clamp: 2; //行数
		line-clamp: 2;
		-webkit-box-orient: vertical; //盒子中内容竖直排列
	}

	.flexcolumn1 {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-direction: column;
		height: 200rpx;
	}
</style>